<template>
    <view class="orderlist">
        <scroll-view class="scroll-view_H">
            <block v-for="(item, index) in Tag" :key="index">
                <view @click="changeEvent(index)" class="scroll-view-item_H" :class="type == index ? 'active' : ''"
                    >{{ item }}
                </view>
            </block>
        </scroll-view>
        <view class="orderlist-main">
            <view
                @click="goToDetail(orderItem)"
                class="orderlist-item"
                v-for="(orderItem, orderIndex) in list"
                :key="orderIndex"
            >
                <view class="orderlist-top">
                    <view>订单编号：{{ orderItem.orderId }}</view>
                    <view
                        v-if="orderItem.status == 10 || orderItem.status == 20 || orderItem.status == 30"
                        style="color: #ff822e"
                        >{{ orderItem.statusName }}</view
                    >
                    <view
                        v-if="orderItem.status == 40 || orderItem.status == 50 || orderItem.status == 60"
                        style="color: #666"
                        >{{ orderItem.statusName }}</view
                    >
                </view>
                <view class="orderlist-content">
                    <view class="orderlist-icon">
                        <image :src="orderItem.skuPicAbsolute" style="background-color: #eaeaea"></image>
                    </view>
                    <view class="orderlist-right">
                        <view class="orderlist-right-title">{{ orderItem.goodsName }}</view>
                        <view class="orderlist-right-tag">{{ orderItem.specsKey }}</view>
                        <view class="orderlist-right-price">
                            <view>¥{{ orderItem.unitPrice }}</view>
                            <view> *{{ orderItem.number }}</view>
                        </view>
                    </view>
                </view>
                <view class="orderlist-bottom"
                    >应付款: ￥<text>{{ orderItem.amount }}</text></view
                >
                <view v-if="orderItem.status == 10" class="orderlist-btn">
                    <view @click.stop="cancelOrder(orderItem)" class="btn2" style="margin-right: 20rpx">取消订单</view>
                    <view @click.stop="payEvent(orderItem)" class="btn1">去付款</view>
                </view>
                <view v-if="orderItem.status == 30" class="orderlist-btn">
                    <view
                        @click.stop="goToExpress(orderItem)"
                        v-if="orderItem.typeId != 1"
                        class="btn2"
                        style="margin-right: 20rpx"
                        >查看物流</view
                    >
                    <view @click.stop="confirmrReceipt(orderItem)" class="btn1">确认收货</view>
                </view>
                <view v-if="orderItem.status == 40" class="orderlist-btn">
                    <view @click.stop="deleteOrder(orderItem, index)" class="btn2" style="margin-right: 20rpx"
                        >删除订单
                    </view>
                    <view @click.stop="goToExpress(orderItem)" v-if="orderItem.typeId != 1" class="btn2">查看物流</view>
                </view>
                <view v-if="orderItem.status == 50 || orderItem.status == 60" class="orderlist-btn">
                    <view @click.stop="deleteOrder(orderItem, index)" class="btn2">删除订单</view>
                </view>
            </view>
        </view>
        <view v-if="list.length == 0 && isloading == false" class="empty_order_view">
            <image
                style="width: 316rpx; height: 316rpx; margin-top: 214rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
            ></image>
            <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx; line-height: 44rpx">暂无订单</label>
        </view>
        <u-loadmore
            v-if="more"
            :status="netStatus"
            loadingText="加载中"
            loadmoreText="上拉加载更多"
            nomoreText="已经到底啦～"
            fontSize="28"
            iconSize="30"
            marginTop="30"
            marginBottom="30"
        ></u-loadmore>
    </view>
</template>

<script>
export default {
    data() {
        return {
            Tag: ['全部', '待付款', '待发货', '待收货', '已完成'],
            type: 0,
            empty: false,
            status: 0,
            list: [],
            form: {
                pageNum: 1,
                pageSize: 10,
                isAsc: 'descending',
                orderByColumn: 'orderAddTime',
            },
            netStatus: 'loadmore',
            more: false,
            isloading: false,
            loading: false,
        };
    },
    onReachBottom() {
        if (this.more == false) return;
        this.netStatus = 'loading';
        this.form.pageNum = ++this.form.pageNum;
        this.requestOrderList(false);
    },
    methods: {
        requestOrderList(isFresh) {
            if (isFresh) {
                this.form.pageNum = 1;
                this.form.pageSize = 10;
                this.isloading = true;
            }
            this.request
                .httpTokenRequest(`/mp-api/wx/order/my/${this.status}`, this.form, 'POST', false)
                .then((res) => {
                    uni.stopPullDownRefresh();
                    this.isloading = false;
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.list = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.list.push(item);
                            });
                        }
                        if (res.data.total > this.list.length) {
                            this.netStatus = 'loadmore';
                            this.more = true;
                        } else {
                            this.more = false;
                            this.netStatus = 'nomore';
                        }
                    } else {
                        this.more = false;
                        this.netStatus = 'nomore';
                    }
                });
        },
        changeEvent(index) {
            this.type = index;
            if (index == 0) {
                this.status = 0;
            } else if (index == 1) {
                this.status = 10;
            } else if (index == 2) {
                this.status = 20;
            } else if (index == 3) {
                this.status = 30;
            } else if (index == 4) {
                this.status = 40;
            }
            this.requestOrderList(true);
        },
        goToDetail(item) {
            uni.navigateTo({
                url: `/packageOrder/pages/orderlist/orderDetail?id=${item.id}`,
            });
        },
        cancelOrder(item) {
            uni.showModal({
                cancelText: '取消',
                confirmText: '确定',
                title: '是否确认取消此订单？',
                success: (res) => {
                    if (res.confirm) {
                        this.request
                            .httpTokenRequest(`/mp-api/wx/order/cancel/${item.id}`, null, 'POST', false)
                            .then((res) => {
                                if (res.code == 0) {
                                    item.status = 50;
                                    item.statusName = '已取消';
                                }
                            });
                    }
                },
            });
        },
        deleteOrder(item, index) {
            uni.showModal({
                cancelText: '取消',
                confirmText: '确定',
                title: '是否确认删除此订单？',
                success: (res) => {
                    if (res.confirm) {
                        this.request
                            .httpTokenRequest(`/mp-api/wx/order/delete/${item.id}`, null, 'POST', false)
                            .then((res) => {
                                if (res.code == 0) {
                                    this.list.splice(index, 1);
                                }
                            });
                    }
                },
            });
        },
        goToExpress(item) {
            uni.navigateTo({
                url: `/packageMine/pages/logistics/logistics?id=${item.id}`,
            });
        },
        confirmrReceipt(item) {
            uni.showModal({
                cancelText: '取消',
                confirmText: '确定',
                title: '是否确认已收货？',
                success: (res) => {
                    if (res.confirm) {
                        this.request
                            .httpTokenRequest(`/mp-api/wx/order/confirm/${item.id}`, null, 'POST', false)
                            .then((res) => {
                                if (res.code == 0) {
                                    item.status = 40;
                                    item.statusName = '已完成';
                                }
                            });
                    }
                },
            });
        },
        payEvent(item) {
            if (this.loading) {
                return;
            }
            var form = {
                id: item.id,
            };
            const that = this;
            that.loading = true;
            this.request
                .httpTokenJsonRequest('/mp-api/wx/order/payment', form, 'POST', false)
                .then((res) => {
                    if (res.code == 0) {
                        uni.requestPayment({
                            provider: 'wxpay',
                            timeStamp: res.data.timeStamp,
                            nonceStr: res.data.nonceStr,
                            package: res.data.packageValue,
                            signType: res.data.signType,
                            paySign: res.data.paySign,
                            success: (payRes) => {
                                item.status = 20;
                                item.statusName = '待发货';
                                that.subscribeMessage();
                            },
                            fail: (err) => {
                                that.loading = false;
                            },
                        });
                    } else {
                        that.loading = false;
                    }
                })
                .catch((err) => {
                    that.loading = false;
                });
        },
        subscribeMessage() {
            uni.requestSubscribeMessage({
                tmplIds: [
                    '4WlKLcNqWHQxN6WYburUGD8GdmGg7IcRmDg0x3u_Rds',
                    'OB01OzknOemOioXmf-SzbogLAC8FjjFhRuxKxLX7uUM',
                    'xX3kwdzC5I-61OxI_yUIGhO_BozN7a8U-PVGjORIlJU',
                ],
                success(res) {},
            });
        },
    },
    onShow() {
        this.requestOrderList(true);
    },
    onPullDownRefresh() {
        this.requestOrderList(true);
    },
};
</script>

<style scoped lang="scss">
body,
.orderlist {
    height: 100%;
    min-height: 100vh;
    background-position: center;
    background-color: #f8f8f8;
}

uni-page-body,
html {
    height: 100%;
    background-color: #f8f8f8;
}

.empty_order_view {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
